<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2837357_s8u3n2x8ame.css">
    <script src="../js/jquery.js"></script>
    <!-- <script src="../js/register.js"></script> -->
    <script src="../js/promise封装ajax.js"></script>


</head>

<body>
    <div class="site-nav">
        <div class="site-nav-bd">
            <ul class="site-nav-bd-1">
                <li class="menu">
                    <div>
                        <a href="../html/login.html">亲,请登录</a>
                        <a href="#">免费注册</a>
                    </div>
                </li>
                <li class="menu-mobile"> <a href="#">手机逛淘宝</a> </li>
            </ul>
            <ul class="site-nav-bd-2">
                <li class="menu-home">
                    <div class="menu-hd"><a href="taobao.html" class="h">淘宝首页</a></div>
                </li>
                <li class="menu-my-taobao">
                    <div class="menu-taobao">
                        <a href="#">我的淘宝</a>
                        <span class="iconfont icon-xiangxia"></span>
                    </div>

                    <div class="menu-bd-panel">
                        <a href="#">已买到的宝贝</a>
                        <a href="#">我的足迹</a>
                        <a href="#">爱逛街 </a>
                        <a href="#">淘宝达人</a>
                        <a href="#">新欢</a>
                    </div>

                </li>
                <li><span class="iconfont icon-gouwuche"></span><a href="#">购物车</a> <span class="iconfont icon-xiangxia"></span></li>
                <li class="menu-sc"><span class="iconfont icon-collection"></span><a href="#">收藏夹</a> <span class="iconfont icon-xiangxia"></span>
                    <div class="menu-bd-panel">
                        <a href="#">收藏的宝贝</a>
                        <a href="#">收藏的店铺</a>

                    </div>
                </li>
                <li>商品分类</li>
                <li>|</li>
                <li class="menu-m"><a href="">卖家中心</a> <span class="iconfont icon-xiangxia"></span>
                    <div class="menu-bd-panel">
                        <a href="#">免费开店</a>
                        <a href="">已卖出的宝</a>
                        <a href="">未卖出的宝</a>

                    </div>
                </li>
                <li class="menu-l"><a href="">联系客服</a> <span class="iconfont icon-xiangxia"></span>
                    <div class="menu-bd-panel">
                        <a href="#">消费者客户</a>
                        <a href="">卖家客服</a>

                    </div>
                </li>
                <li><a href="">网址导航</a> <span class="iconfont icon-xiangxia"></span></li>
            </ul>
        </div>

    </div>
    <div class="page">
        <div class="header">
            <div class="logo">
                <h1>
                    <a href="#">
                        <i class="iconfont icon-taobao"></i>
                    </a>

                </h1>
                <h2 class="ts1">
                    用户注册
                </h2>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="pc-reg">
            <div class="reg-form">
                <div>
                    <label for="">用户名</label>
                    <input type="text" placeholder="请输入你的用户名" class="user">
                    <p></p>
                </div>
                <div>
                    <label for="">密&emsp;码</label>
                    <input type="password" placeholder="请输入你的密码" class="pwd">
                    <p></p>

                </div>
                <div>
                    <label for="">手机号</label>
                    <input type="text" placeholder="请输入你的手机号" class="iphone">
                    <p></p>

                </div>
                <div>
                    <label for="">邮&emsp;箱</label>
                    <input type="text" placeholder="请输入你的邮箱" class="email">
                    <p></p>

                </div>
                <button class="btn">点击注册</button>
                <div class="reg-agreement">

                    <div>
                        <span>已阅读并同意以下协议</span>
                        <a href="">淘宝平台服务协议,</a>
                        <a href="">隐私权政策,</a>
                        <a href="">法律声明,</a>
                        <a href="">支付宝及客户端服务协议</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-hd">
        <p>
            <a href="javascript:;">阿里巴巴集团</a>
            <b>|</b>
            <a href="javascript:;">阿里巴巴国际站</a>
            <b>|</b>
            <a href="javascript:;">阿里巴巴中国站</a>
            <b>|</b>
            <a href="javascript:;">全球速卖通</a>
            <b>|</b>
            <a href="javascript:;">淘宝网</a>
            <b>|</b>
            <a href="javascript:;">天猫</a>
            <b>|</b>
            <a href="javascript:;">聚划算</a>
            <b>|</b>
            <a href="javascript:;">一淘</a>
            <b>|</b>
            <a href="javascript:;">阿里妈妈</a>
            <b>|</b>
            <a href="javascript:;">飞猪</a>
            <b>|</b>
            <a href="javascript:;">虾米</a>
            <b>|</b>
            <a href="javascript:;">阿里云计算</a>
            <b>|</b>
            <a href="javascript:;">云os</a>
            <b>|</b>
            <a href="javascript:;">万网</a>
            <b>|</b>
            <a href="javascript:;">支付宝</a>
            <b>|</b>
            <a href="javascript:;">来往</a>

        </p>
    </div>

    <div class="footer-bd">
        <p><span> 
            <a href="javascript:;">关于淘宝</a>
         </span>
            <span>
            <a href="javascript:;">合作伙伴</a>
         </span>
            <span>
            <a href="javascript:;">营销中心</a>
         </span>
            <span>
            <a href="javascript:;">廉正举报</a>
         </span>
            <span>
            <a href="javascript:;">诚征英才</a>
         </span>
            <span>
            <a href="javascript:;">联系我们</a>
         </span>
            <span>
            <a href="javascript:;">网站地图</a>
         </span>
            <span>
            <a href="javascript:;">隐私权政策</a>
         </span>
            <span>
            <a href="javascript:;">法律声明</a>
         </span>
            <span> 
             <a href="javascript:;">知识产权</a></span>
            <b>
                 |
             </b>
            <em>
            © 2003-现在 Taobao.com 版权所有
         </em>

        </p>
        <p>
            <span><a href="javascript:;" rel="noopener noreferrer">增值电信业务经营许可证：浙B2-20080224</a></span>
            <b>|</b>
            <span>
                <a href="javascript:;" rel="noopener noreferrer">增值电信业务经营许可证（跨地区）： B2-20150210</a>
             </span>

            <b>|</b>
            <span>
                <a href="javascript:;" rel="noopener noreferrer">浙网文（2019）1033-086号</a>
              </span>

            <b>|</b>
            <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
        </p>
    </div>
</body>

<script>
    $(function() {

        var userflag = false;
        var pwdflag = false;
        var phoneflag = false;
        var emailflag = false;
        $(".user").blur(function() {
            var user = $(".user").val();
            if (/^[a-z,A-Z]\w{5,11}$/.test(user)) {
                select({
                    user
                }).then(data => {
                    var {
                        status,
                        msg
                    } = data;
                    console.log(status);
                    if (status) {
                        $(".user").next().text("正确").css({
                            color: "green"
                        })
                        userflag = true;
                    } else {
                        $(".user").next().text("该用户名已被注册!").css({
                            color: 'red'
                        })
                    }
                })

            } else {
                $(".user").next().text("必须是6-12位的数字和字母,且以字母开头").css({
                    color: 'red'
                })
            }
        })
        $(".pwd").blur(function() {
            var pwd = $(".pwd").val();
            if (/^\w{6,12}$/.test(pwd)) {
                var pwd1 = 0;
                var pwd2 = 0;
                var pwd3 = 0;
                var pwd4 = 0;
                if (/[0-9]/.test(pwd)) pwd1 = 1;
                if (/[a-z]/.test(pwd)) pwd2 = 1;
                if (/[A-Z]/.test(pwd)) pwd3 = 1;
                if (/[_]/.test(pwd)) pwd4 = 1;

                pwd1 = true;
                var pwdsum = pwd1 + pwd2 + pwd3 + pwd4;
                if (pwdsum == 1) {
                    $(".pwd").next().text("密码强度低").css({
                        color: 'green'
                    })
                    pwdflag = true;

                } else if (pwdsum == 2) {
                    $(".pwd").next().text("密码强度中").css({
                        color: 'orange'
                    })
                    pwdflag = true;
                } else if (pwdsum == 3) {
                    $(".pwd").next().text("密码强度高").css({
                        color: 'blue'
                    })
                    pwdflag = true;
                } else if (pwdsum == 4) {
                    $(".pwd").next().text("密码强度极高").css({
                        color: 'black'
                    })
                    pwdflag = true;
                }
            } else {
                $(".pwd").next().text("密码必须是6-12位的数字或者字母组成").css({
                    color: 'red'
                })
            }
        })
        $(".iphone").blur(function() {
            var phone = $(".iphone").val();
            if (/^[1][3-9][0-9]{9}$/.test(phone)) {
                selectphone({
                    phone
                }).then(data => {
                    var {
                        status,
                        msg
                    } = data
                    if (status) {
                        $(".iphone").next().text("正确").css({
                            color: "green"
                        })
                        phoneflag = true;

                    } else {
                        $(".iphone").next().text("该手机号被注册").css({
                            color: "red"
                        })
                    }
                })

            } else {
                $(".iphone").next().text("手机号格式不正确").css({
                    color: "red"
                })
            }
        })


        $(".email").blur(function() {
            var email = $(".email").val();
            if (/^\w+\@+\w+\.+(com|cn|email)$/.test(email)) {
                selectemail({
                    email
                }).then(data => {
                    var {
                        status,
                        msg
                    } = data
                    console.log(status)
                    if (status) {
                        $(".email").next().text("正确").css({
                            color: "green"
                        })
                        emailflag = true;
                    } else {
                        $(".email").next().text("邮箱已被注册").css({
                            color: "red"
                        })
                    }
                })

            } else {
                $(".email").next().text("邮箱格式不正确").css({
                    color: "red"
                })
            }
        })


        $(".btn").click(function() {
            var userInp = $(".user").val();
            var pwdInp = $(".pwd").val();
            var phoneInp = $(".iphone").val();
            var emailInp = $(".email").val();
            if (userflag && pwdflag && phoneflag && emailflag) {
                console.log(111);
                register({
                    userInp,
                    pwdInp,
                    phoneInp,
                    emailInp
                }).then(data => {
                    var {
                        status,
                        msg
                    } = data;
                    if (status) {

                        if (confirm('注册成功是否跳转登录页')) {
                            location.href = "./login.html";
                        } else {
                            location.reload();
                        }

                    } else {
                        alert(msg);
                    }
                })
            } else {
                alert('注册失败');
            }

        })
    })
</script>

</html>